<template>
  <van-dropdown-menu>
    <van-dropdown-item v-model="order" :options="option1" @change="getoption" />
    <van-dropdown-item v-model="sort" :options="option2" @change="getoption" />
  </van-dropdown-menu>
  <div class="tatol">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <goods
          class="one"
          v-for="item in goodslist"
          :key="item.id"
          :data="item"
          @toid="getid"
        >
          <template v-slot:price>
            <div class="gdlist">
              <span> &yen;{{ item.sell_price }}</span>
              <s> &yen;{{ item.market_price }}</s>
            </div>
            <div class="gdlistbottom">
              <span>双十一</span>
              <span> 剩余:{{ item.stock_quantity }}</span>
            </div>
          </template>
        </goods>
      </van-list>
    </van-pull-refresh>
  </div>
  <backtop :top="100" />
</template>

<script>
import goods from "./goodscar.vue";
import backtop from "./backtop.vue";
import { fetchGoodsList, fetchSearch } from "@/API/goods.js";

import { ref,watch, toRefs} from "vue";
export default {
  props: {
    keyword: {
      type: String,
      required: false,
    },
  },

  setup(props) {
    const { keyword } =toRefs(props)
    const order = ref(0);
    const sort = ref("a");
    const option1 = [
      { text: "升序", value: "desc" },
      { text: "降序", value: "asc" },
    ];
    order.value = "desc";
    sort.value = "buy";
    // watch(要侦听的数据,回调函数)

    const option2 = [
      { text: "销量", value: "buy" },
      { text: "好评", value: "likes" },
      { text: "价格", value: "sell_price" },
    ];
    console.log(props.keyword);

    const goodslist = ref([]);
    const loading = ref(false);
    const finished = ref(false);
    const refreshing = ref(false);
    const getresult = ref([]);
    const keydata = {
      keyword: keyword.value[0],
      sort: sort.value,
      order: order.value,
      page: 0,
      pagesize: 8,
    };
       watch(keyword, (val) => {
           keydata.keyword=val[0]
        console.log("最新值",val);    
        onRefresh()

    })
    var _fetchGoodsList = fetchGoodsList;
    if (props.keyword) {
      _fetchGoodsList = fetchSearch;
    }
    const onLoad = async () => {
    keydata.page++
      if (refreshing.value) {
        goodslist.value = [];
        refreshing.value = false;
      }
      console.log(keydata.value);
      let result = await _fetchGoodsList(keydata);
      console.log(result.length);

      result.message
        ? (getresult.value = result.message)
        : (getresult.value = result);
      console.log(getresult.value);
      goodslist.value = [...goodslist.value, ...getresult.value];

      loading.value = false;
      if (getresult.value.length == 0) {
        goodslist.value.length % 2 == 1
          ? goodslist.value.push(goodslist.value[0])
          : null;
        finished.value = true;
      }
    };

    const onRefresh = () => {
      // 清空列表数据
     keydata.page=0
      finished.value = false;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      loading.value = true;
      goodslist.value=[]
      onLoad();
    };
    const getoption = function (value) {
        keydata.sort = sort.value
        keydata.order = order.value
      onRefresh()
    };
    return {
      goodslist,
      onLoad,
      loading,
      finished,
      refreshing,
      onRefresh,
      order,
      sort,
      option1,
      option2,
      getoption,
      keydata
    };
  },
    
  methods: {
    getid(data) {
      this.id = data;
      console.log(this.id);
      this.$router.push("/gooddetails/" + this.id);
    },
  },
  components: {
    goods,
    backtop,
  },
};
</script>

<style lang="scss" scoped>
.van-list {
  display: flex;
  flex-flow: wrap;
  justify-content: space-between;
  align-content: space-around;
  padding: 0 0.3rem;
  background-color: #f7f8fa;
  ::v-deep .van-list__finished-text {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
}
.gdlist {
  display: flex;
  justify-content: flex-start;
  align-items: center;

  span:nth-child(1) {
    color: #ff3973;
    font-size: 0.7rem;
  }
  s {
    font-size: 0.3rem;
    margin-left: 0.2rem;
  }
}
.gdlistbottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  span:nth-child(1) {
    color: #ff3973;
    font-size: 0.6rem;
  }
}
</style>